<template>
  <el-row>
    <el-col :span="12">
      <span>{{startTimeTitle}}</span>
      <el-tooltip :content="startTimeTitle">
        <el-date-picker
          class="base-search"
          v-model="startTime"
          :type="type"
          clearable
          :value-format="valueFormat"
          :format="valueFormat"
          default-time="00:00:00"
          :placeholder="startTimeTitle"
          :picker-options="pickerOptionsStart"
          @change="changeStartTime"
        ></el-date-picker>
      </el-tooltip>
    </el-col>

    <el-col :span="12">
      <span>{{endTimeTitle}}</span>
      <el-tooltip :content="endTimeTitle">
        <el-date-picker
          class="base-search"
          v-model="endTime"
          :type="type"
          clearable
          :value-format="valueFormat"
          :format="valueFormat"
          default-time="23:59:59"
          :placeholder="endTimeTitle"
          :picker-options="pickerOptionsEnd"
          @change="changeEndTime"
        ></el-date-picker>
      </el-tooltip>
    </el-col>
  </el-row>
</template>
<script>
export default {
  props: {
    /**
     * @param startTime 开始时间
     * @param endTime   结束时间
     * @param type      日期类型
     * @param startTimeTitle 开始时间title
     * @param endTimeTitle   结束时间title
     * @param valueFormat    格式化形式
     */
    startTime: {
      type: String,
      default: ''
    },
    endTime: {
      type: String,
      default: ''
    },
    type: {
      type: String,
      default: 'datetime'
    },
    startTimeTitle: {
      type: String,
      default: '开始日期'
    },
    endTimeTitle: {
      type: String,
      default: '结束日期'
    },
    valueFormat: {
      type: String,
      default: 'yyyy-MM-dd HH:mm:ss'
    }
  },
  data () {
    return {
      //校验开始时间的选择范围：开始时间不能大于结束时间，不能大于当前时间
      pickerOptionsStart: {
        disabledDate: time => {
          if (this.endTime) {
            return time.getTime() > Date.now() || time.getTime() > new Date(this.endTime).getTime()
          } else {
            return time.getTime() > Date.now()
          }
        }
      },
      //校验结束时间的选择范围：结束时间不能小于开始时间，不能大于当前时间
      pickerOptionsEnd: {
        disabledDate: time => {
          return time.getTime() < new Date(this.startTime).getTime()
        }
      }
    }
  },

  methods: {
    //获取开始时间
    changeStartTime (value) {
      this.$emit("changStartTime", value)
    },
    //获取结束时间
    changeEndTime (value) {
      this.$emit("changeEndTime", value)
    },
    //清空数据
    clear () {
      this.startTime = this.endTime = null
    }
  }
}
</script>

<style lang='less' scoped>
</style>